<template>
  <div
    v-if="playMode !== 1"
    class="h-camera-control"
    :style="{
      'width': typeof width === 'string' ? width : width + 'px',
      'background-color': backgroundColor,
      'border-color': borderColor,
      'color': color,
      ...movePosition
    }"
  >
    <div class="h-control__close">
      <el-button
        type="text"
        icon="el-icon-close"
        @click="changeIsPtzShow(false)"
      />
    </div>
    <div class="h-control-line">
      <div class="h-circle-direct">
        <el-button
          class="h-circle-pause"
          :disabled="!isPtzShow"
          type="text"
          icon="el-icon-video-pause"
          @click="ptzControl(0)"
        />
        <template v-for="item in arrowList">
          <el-button
            :key="item.id"
            :class="'h-circle-icon ' + item.class"
            :disabled="!isPtzShow"
            type="text"
            icon="el-icon-caret-left"
            @mousedown.native.stop="ptzControl(item.id)"
            @mouseup.native.stop="ptzControl(0)"
          />
        </template>
      </div>
      <div class="h-circle-group">
        <div v-for="item in groupList" :key="item.plus" class="h-circle-line">
          <el-button
            type="text"
            :disabled="!isPtzShow"
            icon="el-icon-circle-plus-outline"
            @mousedown.native.stop="ptzControl(item.plus)"
            @mouseup.native.stop="ptzControl(0)"
          />
          <span>{{ item.label }}</span>
          <el-button
            type="text"
            :disabled="!isPtzShow"
            icon="el-icon-remove-outline"
            @mousedown.native.stop="ptzControl(item.reduce)"
            @mouseup.native.stop="ptzControl(0)"
          />
        </div>
      </div>
    </div>
    <div class="h-control-line">
      <div class="h-ptz-box h-ptz-speed">
        <div class="h-ptz-label">云台转速：</div>
        <div class="h-ptz-content h-ptz-speed__control">
          <el-slider v-model="slider" :disabled="!isPtzShow" :min="1" :max="255"></el-slider>
        </div>
      </div>
    </div>
    <div class="h-control-line">
      <div class="h-ptz-box ptz-preset">
        <div class="h-ptz-label">预置位：</div>
        <div class="h-ptz-content h-ptz-preset__control">
          <el-select v-model="preset" :disabled="!isPtzShow">
            <template v-for="item in 255">
              <el-option :key="item" :label="item" :value="item" />
            </template>
          </el-select>
        </div>
        <div class="h-ptz-content h-ptz-preset__group">
          <template v-for="item in setList">
            <el-button
              :key="item.id"
              type="text"
              :disabled="!isPtzShow"
              :title="item.label"
              @click="ptzControl(item.id)"
            >
              <i :class="'h-ptz-icon '+ item.class" />
            </el-button>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { defaultState } from '@/components/VideoManagement/mixins'

export default {
  name: 'CameraControl',
  mixins: [defaultState],
  props: {
    cameraKey: {
      type: String,
      default: 'id'
    },
    playMode: {
      type: Number,
      default: 0
    },
    width: {
      type: String | Number,
      default: 240
    },
    backgroundColor: {
      type: String,
      default: 'rgba(0, 0, 0, .7)'
    },
    borderColor: {
      type: String,
      default: 'rgba(0, 0, 0, .2)'
    },
    color: {
      type: String,
      default: 'white'
    },
    position: {
      type: Object,
      default: () => {
        return {
          left: 0,
          bottom: 0
        }
      }
    }
  },
  data() {
    return {
      arrowList: [{
        id: 1,
        class: 'circle-top'
      }, {
        id: 2,
        class: 'circle-bottom'
      }, {
        id: 3,
        class: 'circle-left'
      }, {
        id: 4,
        class: 'circle-right'
      }, {
        id: 5,
        class: 'circle-left-top'
      }, {
        id: 6,
        class: 'circle-left-bottom'
      }, {
        id: 7,
        class: 'circle-right-top'
      }, {
        id: 8,
        class: 'circle-right-bottom'
      }],
      groupList: [{
        plus: 13,
        reduce: 14,
        label: '光圈'
      }, {
        plus: 9,
        reduce: 10,
        label: '变倍'
      }, {
        plus: 11,
        reduce: 12,
        label: '聚焦'
      }],
      setList: [{
        id: 15,
        class: 'set3',
        label: '设置'
      }, {
        id: 16,
        class: 'set2',
        label: '调用'
      }, {
        id: 17,
        class: 'set1',
        label: '删除'
      }],
      slider: 120,
      preset: 1,
      movePosition: {
        'left': 0,
        'bottom': '-100%'
      }
    }
  },
  watch: {
    isPtzShow(val) {
      this.setPosition(val)
    }
  },
  created() {
    this.changeIsPtzShow(false)
  },
  methods: {
    setPosition(val) {
      this.movePosition = this.getNewData(this.position)
      for (const key in this.position) {
        if ((key === 'top' || key === 'bottom') && this.position[key] === 0 && !val) {
          this.$set(this.movePosition, key, '-100%')
        }
      }
    },
    ptzControl(operation) {
      const url = `${this.layoutConfig.enableHTTPS ? 'https://' : 'http://'}${this.layoutConfig.server.stream.ip}:${this.layoutConfig.server.stream.port}`
      axios.get(`${url}/ivms/ptz`, {
        params: {
          ChanPubId: this.layoutSelected.cameraInfo[this.cameraKey || this.treeNodeKey],
          PtzType: operation,
          PtzParam: operation === 0 ? '0' : (operation < 15 ? this.slider : this.preset),
          AuthorizationId: this.authorizationId
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.h-camera-control {
  padding: 10px;
  position: absolute;
  z-index: 99;
  border-width: 1px;
  border-style: solid;
  transition: all .3s ease-in-out;

  .h-control__close {
    height: 20px;
    margin-bottom: 5px;
    margin-top: -10px;
    text-align: right;
    line-height: 20px;
  }

  .h-control-line {
    display: flex;
    justify-items: center;
    align-items: center;

    .h-circle-direct {
      width: 120px;
      height: 120px;
      background: url('~@/assets/imgs/bg.png') 0 0 no-repeat;
      background-size: 100% 100%;
      position: relative;

      .h-circle-pause {
        font-size: 48px;
        position: absolute;
        left: 50%;
        top: 50%;
        padding: 0;
        margin: 0;
        transform: translate(-50%, -50%);
        color: rgba(255, 255, 255, .4);
      }

      .h-circle-icon {
        font-size: 22px;
        color: #0c1b3b;
        position: absolute;
        padding: 0;
        margin: 0;

        &.active {
          color: #FFFFFF;
        }

        &.circle-left {
          left: 10px;
          top: 50%;
          transform: translateY(-50%);
        }

        &.circle-left-top {
          left: 20px;
          top: 25%;
          transform: translateY(-50%) rotate(45deg);
        }

        &.circle-top {
          left: 50%;
          top: 10px;
          transform: translateX(-50%) rotate(90deg);
        }

        &.circle-right-top {
          right: 20px;
          top: 25%;
          transform: translateY(-50%) rotate(135deg);
        }

        &.circle-right {
          right: 10px;
          top: 50%;
          transform: translateY(-50%) rotate(180deg);
        }

        &.circle-right-bottom {
          right: 20px;
          bottom: 25%;
          transform: translateY(50%) rotate(-135deg);
        }

        &.circle-bottom {
          left: 50%;
          bottom: 10px;
          transform: translateX(-50%) rotate(-90deg);
        }

        &.circle-left-bottom {
          left: 20px;
          bottom: 25%;
          transform: translateY(50%) rotate(-45deg);
        }
      }
    }

    .h-circle-group {
      flex: 1;
      padding-left: 15px;
      font-size: 14px;

      i {
        font-size: 18px;
      }

      .h-circle-line {
        display: flex;
        justify-items: center;
        align-items: center;
        line-height: 40px;

        span {
          flex: 1;
          font-size: 14px;
          text-align: center;
        }
      }
    }

    .h-ptz-box {
      width: 100%;
      display: flex;
      font-size: 14px;
      line-height: 38px;
      height: 38px;
      overflow: hidden;

      .h-ptz-label {
        width: 70px;
      }

      .h-ptz-content {
        flex: 1;

        .h-ptz-icon {
          display: inline-block;
          width: 14px;
          height: 14px;
          background-position: 0 0;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          vertical-align: middle;

          &.set3 {
            background-image: url('~@/assets/images/set3.png');
          }

          &.set2 {
            background-image: url('~@/assets/images/set2.png');
          }

          &.set1 {
            background-image: url('~@/assets/images/set1.png');
          }
        }
      }

      .h-ptz-preset__group {
        padding-left: 10px;
      }
    }
  }
}
</style>